<template>
	<view class="myContent" style="width:100%;height:100%">
		<view class="top">
			<image src="../../../static/img/头像@2x.png" mode="widthFix"></image>
			<view class="right">
				<view v-if="!mobileValue" class="name" @click="loginIn">
					点击登录/注册
				</view>
				<view class="name" v-if="mobileValue">
					{{mobileValue}}
				</view>
				<view class="introduce">
					欢迎使用虚拟店长
				</view>
			</view>
		</view>
		<view class="center">
			<image src="../../../static/img/会员bg@2x.jpg" mode="widthFix"></image>
			<view class="content">
				<view class="left">
					<text class="kaitong">开通虚拟店长会员</text>
					<text class="enjoy">享更多精选服务</text>
				</view>
				<view class="right">
					<text>立即开通</text>
				</view>
			</view>
			<!-- 	<view class="content">
				<view class="left">
					<text class="kaitong">VIP会员</text>
					<text class="enjoy">享更多精选服务</text>
				</view>
				<view class="right">
					30天后到期
				</view>
			</view> -->
		</view>
		<view class="evaluate">
			<view class="list" v-for="(item,index) in evaluateStatus" :index="index" :key="index"
				@click="enterSelect(index)">
				<image :src="item.url" mode="widthFix"></image>
				<text class="text">{{item.text}}</text>
			</view>

		</view>

	</view>
</template>

<script setup>
	import * as login from '@/common/sju.login.js'
	import {
		onMounted
	} from "vue";
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	// import menuList from '@/components/menuList/menuList.vue'
	const vipLevel = ref(-1)
	const deadLine = ref()
	const renew = ref(false)
	const mobileValue = ref()
	const type = ref()
	const bgImageColor = computed(() => {
		return useThemeStore().bgImage
	})
	const evaluateStatus = ref([{
			value: 0,
			"text": "使用流程",
			"url": '../../../static/img/使用流程@2x.png'
		},

		{
			value: 2,
			"text": "客服电话",
			"url": '../../../static/img/客服电话@2x.png'
		},
		{
			value: 3,
			"text": "注销登录",
			"url": '../../../static/img/注销登录@2x.png'
		}

	])


	onLoad((options) => {
		type.value = options.type
		if (!proxy.sjuBase.isNull(options.openid)) {
			proxy.sjuLogin.saveValue("xndzOpenid", options.openid);  
		}

	})
	onShow(() => {

		// getpayOrderIdFun()
	})
	onMounted(() => {
		getmobile()
		getUserInfo()

	})

	const getUserInfo = () => {
		console.log(proxy.sjuLogin.getValue("xndzOpenid"))
		console.log(proxy.sjuConfig.appInfo.appId)
		proxy.sjuRequest.request("/api/weixin/queryMember/" + proxy.sjuLogin.getValue("xndzOpenid") + '/' + proxy
				.sjuConfig.appInfo.appId, 'post')
			.then(
				res => {
					console.log(res)
				})
	}
	const getmobile = () => {
		if (proxy.sjuLogin.getValue("xndz_mobile")) {
			mobileValue.value = proxy.sjuLogin.getValue("xndz_mobile")
		} else {
			mobileValue.value = proxy.sjuLogin.getValue("mobileShip")
		}


	}
	const loginIn = () => {
		proxy.sjuNav.navigateTo("/intake/login")
	}
	// 页面跳转
	const enterSelect = (e) => {
		console.log(e)
		if (e == 0) {
			proxy.sjuNav.navigateTo('/my/flow') //
		} else if (e == 2) {
			loginOut()
		} else if (e == 1) {
			callphone()
		}

	}
	const callphone = () => {
		uni.makePhoneCall({
			phoneNumber: '4001886690',
			success: () => {
				console.log('拨打电话成功！');
			},
			fail: () => {
				console.error('拨打电话失败！');
			}
		});
	}
	const loginOut = () => {

		proxy.sjuAlert.showConfirm('您确定要退出虚拟店长吗?', () => {
			//点击确认后执行方法`
			if (proxy.sjuLogin.getValue("mobileShip")) {
				console.log(123)
				proxy.sjuLogin.clearKey("mobileShip");
				
			} else {
				console.log(123456)
				proxy.sjuLogin.clearKey("xndz_mobile");
				proxy.sjuLogin.clearKey("zbjl_merchantCode");
			}
			proxy.sjuNav.navigateTo('/intake/login')


		}, () => {
			//点击取消后执行方法

		}, '提示')

		// navTo('/intake/login')
	}
	const jumpMoney = () => {
		// proxy.sjuNav.navigateTo('/my/becomeVip?type=0')
	}
</script>

<style lang="scss">
	.myContent {
		padding: 20px;
		box-sizing: border-box;

		.top {
			display: flex;
			flex-direction: row;

			image {
				width: 60px;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			margin-left: 20px;

			.name {
				font-weight: bold;
				font-size: 18px;
				line-height: 1.5;
			}

			.introduce {
				font-size: 12px;
				color: #6c727d;
			}
		}

		.center {
			width: 100%;
			height: 23vw;
			margin-top: 20px;
			position: relative;

			image {
				width: 100%;
			}

			.content {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;

				padding: 10px;
				box-sizing: border-box;
				color: #fff;
				justify-content: space-between;
				position: absolute;
				top: 0;
				left: 0;

				.left {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.kaitong {
						font-size: 18px;
						font-weight: bold;
						line-height: 1.5;
					}

					.enjoy {
						font-size: 12px;
						line-height: 1.5;
					}
				}

				.right {
					color: #fff;
					font-size: 14px;

					text {
						color: #2e383a;
						font-weight: bold;
						font-size: 17px;
						font-style: italic;
						padding: 8px 18px;
						background: #f8fdff;
						border-radius: 20px;
					}
				}
			}


		}

		.evaluate {
			display: flex;
			flex-direction: column;
			margin-top: 40rpx;
			width: 100%;
			// height: 360rpx;
			background: #fff;
			border-radius: 5px;
			// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
			// padding:20rpx;
			box-sizing: border-box;
			padding: 20rpx;

			.list {
				display: flex;
				height: 110rpx;
				align-items: center;
				border-bottom: 1px solid #f3f1f1;

				>image {
					width: 35rpx;
				}

				.text {
					margin-left: 20rpx;
					font-size: 30rpx;
					color: #111111;
				}

			}

			.list:last-child {
				border: none
			}
		}

	}
</style>